import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, Image, Dimensions} from 'react-native';

const {width, height, scale} = Dimensions.get('window');
const cols = 3;
const w = 115;
const marginH = (width - w * cols) / (cols + 1);
const Grid = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  });

  const getData = () => {
    fetch(
      'http://api.wuxianshen.com/login/cellphone?phone=xxx&password=xxx',
    ).then(() => {
      fetch('http://api.wuxianshen.com/recommend/resource')
        .then(r => r.json())
        .then(res => {
          setData(res.recommend);
        });
    });
  };

  return (
    <View style={styles.grid}>
      {data.length > 0 &&
        data.map((item, index) => {
          return (
            <View style={styles.pic} key={index}>
              <Image
                style={styles.img}
                source={{
                  uri: item.picUrl,
                }}
              />
              <Text numberOfLines={1} ellipsizeMode="tail" style={styles.title}>
                {item.name}
              </Text>
            </View>
          );
        })}
    </View>
  );
};

export default Grid;

const styles = StyleSheet.create({
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    paddingTop: marginH,
  },
  pic: {
    width: w,
    height: w + 60,
    justifyContent: 'space-around',
    alignItems: 'center',
    marginLeft: marginH,
    marginBottom: marginH,
  },
  img: {
    width: w,
    height: w,
  },
  title: {
    color: '#666',
    fontSize: 14,
  },
});
